<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="java.util.ArrayList"%>
<%@ page import="java.util.Calendar"%>
<%@ page import="main.java.bean.User"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="./css/index.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="bt">
	<div id="clickBoard" onclick="hideUpdatePanel()" style="display: none"></div>
	<%@ include file="top_nav.jsp" %>
	<%
	 	ArrayList<User> users = (ArrayList<User>) session.getAttribute("users");
	 %>
	<div class="operation">
		<form id="queryForm">
			<label>姓名查找
				<input name="name">
			</label>
			<lable>模糊
				<input name="blur" type="checkbox" value="true">
			</lable>
			<input type="button" value="查询" onclick="queryUser()">
		</form>
		<%
			if ((Boolean) session.getAttribute("isAdmin")) {
		%>
		<button class="custom-btn btn-4"><span onclick="addUser()">添加用户</span></button>
		<%
			}
		%>
	</div><br>
	<div id="updatePanel" style="display: none">
		<form action="/test_02/updateUser" method="POST">
		<input id="updateUserId" name="id" type="hidden">
		<label>账号
			<input name="account">
		</label><br>
		<label>密码
			<input name="password" type="password">
		</label><br>
		<label>姓名
			<input name="name">
		</label><br>
		<label>生日
			<input name="birthday" type="date">
		</label><br>
		<label>性别
			<select name="sex">
				<option value="男">男</option>
				<option value="女">女</option>
			</select>
		</label><br>
		<label>爱好
			<input name="hobby">
		</label><br>
		<input type="submit" value="修改">
	</form>
	</div>
	<table id="content" class="content">
		<tr>
			<th>姓名</th>
			<th>年龄</th>
			<th>性别</th>
			<th>爱好</th>
		</tr>
		<%
		 	if (users != null) {
			 	int curYear = Calendar.getInstance().get(Calendar.YEAR);
			 	for (User user : users) {
		 %>
		<%
		 		if ((Boolean) session.getAttribute("isAdmin")) {
		 %>
		<tr>
			<td style="width: 200px;"><%=user.getName() %></td>
			<td style="width: 200px;"><%=curYear - user.getBirthday().getYear() - 1900 %></td>
			<td style="width: 200px;"><%=user.getSex() %></td>
			<td style="width: 300px;"><%=user.getHobby() %></td>
			<td style="width: 410px;"><button class="custom-btn btn-3"><span onclick="displayUpdatePanel(<%=user.getId() %>)">Update</span></button>
			<button class="custom-btn btn-5"><span onclick="deleteUser(<%=user.getId()%>)">Delete</span></button></td>
		<%
	 			} else {
		%>
			<td><%=user.getName() %></td>
			<td><%=curYear - user.getBirthday().getYear() - 1900 %></td>
			<td><%=user.getSex() %></td>
			<td><%=user.getHobby() %></td>
		</tr>
		<%
	 			}
		%>
		<%
			 	}
		 	}
		 %>
	</table>
</div>
</body>
<script>
	function queryUser() {
		var form = document.getElementById("queryForm")
		var content = document.getElementById("content")
		var formData = new FormData(form)
		
		var xhr = new XMLHttpRequest()
		xhr.open("POST", "/test_02/queryUser", true)
		xhr.send(formData)
		xhr.onreadystatechange = function() {
			if (xhr.readyState == 4) {
				var reg = /id=\"content\" class=\"content\">(.*?)<\/table>/s
				var res = xhr.responseText
				console.log(reg.exec(res)[1])
				content.innerHTML = reg.exec(res)[1]
			}
		}
	}

	function addUser() {
		window.location.href = "/test_02/register"
	}
	
	function displayUpdatePanel(id) {
		var panelDisplay = document.getElementById("updatePanel")
		var clickBoard = document.getElementById("clickBoard")
		var userIdElement = document.getElementById("updateUserId")
		panelDisplay.style.setProperty("display", "block")
		clickBoard.style.setProperty("display", "block")
		userIdElement.value = id
	}
	
	function hideUpdatePanel() {
		var panelDisplay = document.getElementById("updatePanel")
		var clickBoard = document.getElementById("clickBoard")
		panelDisplay.style.setProperty("display", "none")
		clickBoard.style.setProperty("display", "none")
	}

	function deleteUser(id) {
		var resp = confirm("确定要删除吗?")
		if (resp) {
			location.href = "/test_02/deleteUser?id="+id
		}
	}
</script>
</html>